<template>
    <div id="recommend"> 

        <div id="recommend-header" @click="goPolist()" v-show="this.$route.meta.isShowtop">
            人气推荐<van-icon name="arrow" />
        </div>

        <!-- 列表 -->
        <div 
            class="recommend"
            v-for="(item,index) in recommend"
            :key="index"
            @click="cartDetail(item.id)">
            <img :src="item.pic" alt="">
            <div class="recommend-container">
                <div class="recommend-container-name">{{item.name}}</div>
                <div class="recommend-container-price">
                    <span>￥{{item.minPrice}}</span>
                    <font>已售{{item.numberSells}}</font>
                </div>
            </div> 
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            recommend:[],
        }
    },
    mounted() {
        // 全民砍价  // 人气推荐 \ 商品列表
        this.$API.getStoreList().then((res)=>{
            console.log(res);
            this.recommend = res.data.data;
            this.recommend = this.recommend.splice(9,11);
        }).catch((error)=>{
            console.log(error);
        });
    },
    methods: {
        // 点击 进入 人气推荐 列表页
        goPolist(){
            this.$router.push("/Popular");
        },
        // 点击 进入 详情页
        cartDetail(id){
            console.log(id);
            this.$router.push({
                path:"/CartDetail",
                query:{
                    id,
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
#recommend{
    width:100%;
    background-color: #fff;
    margin-top:0.2rem;
    #recommend-header{
        width: 100%;
        padding:14px 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        .van-icon{
            margin-left:0.3rem;
        }
    }
    .recommend {
        width:45%;
        margin-left: 0.22rem;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        img{
            width:100%;
            height:4.3rem;
        }
        .recommend-container{
            width:100%;
            font-size: 0.29rem;
            text-align: left;
            .recommend-container-name{
                width:95%;
                white-space: nowrap; //强制不换行
                overflow: hidden; //超出部分隐藏
                text-overflow: ellipsis; //显示‘...’
            }
            .recommend-container-price{
                width:100%;
                margin: 0.2rem 0 0.3rem 0;
                font-size: 0.26rem;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
                span{
                    color:red;
                }
                font{
                    color:gray;
                }
            }
        }
    }
}
    
</style>